<template>
  <div class="accessory">
    <el-card>
      <CommonForm v-if="isRouterAlive" />
    </el-card>
    <el-card>
      <NavTab />
    </el-card>
    <el-card>
      <div class="btn">
        <!-- <el-button type="primary">下载</el-button> -->
        <!-- <el-button @click="accessoryAdd">添加</el-button> -->
      </div>
      <div class="list-content">
        <el-table border :data="list" highlight-current-row>
          <el-table-column label="附件名称" prop="FILE_HIS_NAME" />
          <el-table-column label="附件格式" prop="fileFormat" />
          <el-table-column label="对应版本" prop="VERSION" />
          <el-table-column label="数据行" prop="LINE_NUM_COUNT" />
          <el-table-column label="状态" prop="STATUS" />
          <el-table-column label="上传时间" prop="ADDTIME" />
          <el-table-column label="上传人员" prop="ADDWHO" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="download(row)">
                <vui-icon icon="download-line" />
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog v-model="uploadVisible" title="附件上传" width="80%">
      <upload-dialog v-if="uploadVisible" @cancel="cancel" />
    </el-dialog>
  </div>
</template>
<script>
  import CommonForm from '@bqms/components/ComTable.vue'
  import requestMethod from '../../common/requestMethod'
  import publicFn from '../../common/requestCommon'
  import UploadDialog from '../../components/uploadDialog.vue'
  import { download } from '../../api/home'
  import { GFCD } from '@/utils/utils'
  import NavTab from '../../components/NavTab.vue'
  const configSetting = GFCD('bqms')
  export default {
    name: 'BudgetAccessory',
    components: {
      CommonForm,
      UploadDialog,
      NavTab,
    },
    data() {
      return {
        isRouterAlive: true,
        list: [],
        uploadVisible: false,
      }
    },
    activated() {
      this.list = []
      this.getList()
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    created() {
      this.getList()
    },
    methods: {
      accessoryAdd() {
        this.uploadVisible = true
      },
      cancel() {
        this.uploadVisible = false
      },
      async download(row) {
        console.log(row)
        let res = await download(`${configSetting.domain}${configSetting.baseUrl}`, {
          method: requestMethod.ACCESSORY_DOWNLOAD,
          data: JSON.stringify({
            '#SAVE_FULL_PATH#': row.FILE_PATH + row.FILE_NAME,
            '#BEFORE_NAME#': row.FILE_NAME,
          }),
        })
        let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        let reader = new FileReader()
        reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '附件.xlsx'
          a.href = e.target.result
          a.click()
        }
      },
      async getList() {
        let res = await publicFn(requestMethod.ACCESSORY_LIST, {
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 99999,
          OUT_SOURCE: 'N',
          DOCNO: this.$store.getters['bqmsData/budgetSheetNum'],
        })
        if (res.code === '00000') {
          this.list = res.data[requestMethod.ACCESSORY_LIST].data
          this.list.forEach((row) => {
            row.fileFormat = 'xlsx'
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .accessory {
    padding: 20px;
    .btn {
      display: flex;
      flex-direction: row-reverse;
    }
    .list-content {
      margin-top: 20px;
    }
  }
</style>
